import { Form, Modal, Select, Icon, DatePicker  } from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import { TRANS_TYPE } from "@/generic/ConfigParams";
import moment from 'moment';

const FormItem = Form.Item;
const { Option } = Select; 

const ShareForm = props => {
  const { modalVisible, form, onSubmit: handleAdd, onCancel, srcfile: src, userList, dispatch } = props;
  let { file, vdiskName } = props.location.state;
  const [userOption, setUserOption] = useState([]);
  const typeOption = TRANS_TYPE.map(
    item => <Option key={item.type} value={item.type} label={item.name}><Icon type={item.icon} style={{marginRight: '8px'}}/>{item.name}</Option>
  )

  useEffect(() =>{
    dispatch({
      type: 'fileDetail/fetchUserList',
    })
  }, [])

  useEffect(() =>{
    userList.length > 0 && 
    setUserOption(userList.map(item => <Option key={item.id}>{item.nickName || item.username}</Option>))
    console.log('==>> userList', userList)
  }, [userList])

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      // console.log("==>> fieldsValue", fieldsValue)
      dispatch({
        type:'fileDetail/shareFile',
        payload: { fields: fieldsValue, file: file, vdiskName: vdiskName}
      })
    });
  };

  const disabledDate = current => current && current < moment().startOf('day');

  return (
    <Modal
      destroyOnClose
      title="文件分享"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
      okText="分享"
      cancelText="取消"
    >
      <FormItem
        labelCol={{ span: 5, }}
        wrapperCol={{ span: 15, }}
        label="名称"
        // style={{textAlign: "left"}}
      >
        <span>{file.name}</span>
      </FormItem>
      <FormItem
        labelCol={{ span: 5, }}
        wrapperCol={{ span: 15, }}
        label="分享给"
      >
        {form.getFieldDecorator('user', {
          rules: [
            {
              required: true,
            },
          ],
        })(<Select mode="multiple" style={{ width: '100%' }} placeholder="Please select">{userOption}</Select>)}
      </FormItem>
      <FormItem
        labelCol={{ span: 5, }}
        wrapperCol={{ span: 15, }}
        label="文件类型"
      >
        {form.getFieldDecorator('type', {
          initialValue: TRANS_TYPE[0].type,
          rules: [
            {
              required: true,
            },
          ],
        })(<Select style={{ width: '100%' }} onChange={() => { }} optionLabelProp="label">{typeOption}</Select>)}
      </FormItem>
      <FormItem
        labelCol={{ span: 5, }}
        wrapperCol={{ span: 15, }}
        label="失效时间"
      >
        {form.getFieldDecorator('expires', {
          initialValue: moment(),
          rules: [
            {
              required: true,
            },
          ],
        })(<DatePicker style={{ width: '100%' }} disabledDate={disabledDate}/>)}
        
      </FormItem>
    </Modal>
  );
};

export default Form.create()(ShareForm);
